<template>
  <basic-container>
    <div>
      <el-input v-model="searchVal"
                @keyup.native.enter="onLoad"
                size="small"
                :placeholder="$t('Please enter keyword')"
                type="text"
                style="width:180px;">
        <el-button size="small" @click="onLoad" slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>
    <avue-crud
      ref="crud"
      :table-loading="tableLoading"
      :data="tableData"
      :page.sync="page"
      :option="tableOption"
      @row-del="_deleteDefinition"
      @on-load="onLoad"
      @refresh-change="onLoad"
    >
      <template slot="menuLeft">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="createTask"
        >创建采集任务</el-button>
      </template>
      <template slot-scope="scope" slot="menu">
        <el-button size="small" type="text" :disabled="scope.row.releaseState === 'ONLINE'" icon="el-icon-edit-outline" @click.native="$router.push('/dataIntegration/collectionTask/update/' + scope.row.id)">编辑</el-button>
        <el-button size="small" type="text" icon="el-icon-video-play" :disabled="scope.row.releaseState !== 'ONLINE'" @click.native="_start(scope.row)">运行</el-button>
        <el-button type="text" size="mini" icon="el-icon-time" :disabled="scope.row.releaseState !== 'ONLINE'" @click="_timing(scope.row)">{{$t('Timing')}}</el-button>
        <el-button @click="timeManage(scope.row)" :disabled="scope.row.releaseState === 'OFFLINE'" icon="el-icon-setting" size="mini" type="text">定时管理</el-button>
        <el-button type="text" size="small" v-if="scope.row.releaseState === 'OFFLINE'"  icon="el-icon-upload2" @click="_poponline(scope.row)">{{$t('online')}}</el-button>
        <el-button type="text" size="small" icon="el-icon-download" v-if="scope.row.releaseState === 'ONLINE'" @click="_downline(scope.row)">{{$t('offline')}}</el-button>
      </template>
    </avue-crud>
    <el-dialog append-to-body
      :title="$t('Please set the parameters before starting')"
      v-if="startDialog"
      :visible.sync="startDialog"
      width="auto">
      <m-start :startData="startData" @onUpdateStart="onUpdateStart" @closeStart="closeStart"></m-start>
    </el-dialog>
    <el-dialog append-to-body
      :title="$t('Set parameters before timing')"
      :visible.sync="timingDialog"
      width="auto">
      <m-timing :timingData="timingData" @onUpdateTiming="onUpdateTiming" @closeTiming="closeTiming"></m-timing>
    </el-dialog>
  </basic-container>
</template>
<script>
import { mapActions } from 'vuex';

import mTiming from '@/view-module/dolphin-scheduler/pages/projects/pages/definition/pages/list/_source/timing'
import mStart from '@/view-module/dolphin-scheduler/pages/projects/pages/definition/pages/list/_source/start';

export default {
  components: { mStart , mTiming },
  data(){
    return {
      startDialog: false,
      startData: {},

      timingDialog: false,
      timingData: {
        item: {},
        type: ''
      },
      searchVal: '',
      tableLoading: false,
      tableData: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      tableOption: {
        // height: 'auto',
        // calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: false,
        editBtn: false,
        addBtn: false,
        // viewBtn: true,
        // delBtn: false,
        // menuWidth: 350,
        dialogClickModal: false,
        menuWidth: 300,
        column: [
          {
            label: '任务名称',
            prop: 'name',
            span: 24
          },
          {
            label: '状态',
            prop: 'releaseState',
            dicData: [
              {
                label: '上线',
                value: 'ONLINE'
              },
              {
                label: '下线',
                value: 'OFFLINE'
              }
            ]
          },
          {
            label: '来源类型',
            prop: 'dsType'
          },
          {
            label: '来源信息',
            prop: 'sourceInfo'
          },
          {
            label: '去向类型',
            prop: 'dtType'
          },
          {
            label: '去向信息',
            prop: 'targetInfo'
          },
          {
            label: '定时状态',
            prop: 'scheduleReleaseState',
            dicData: [
              {
                label: '上线',
                value: 'ONLINE'
              },
              {
                label: '下线',
                value: 'OFFLINE'
              }
            ]
          },{
            label:'创建人',
            prop:'userName',
            display:false
          },
          {
            label:'创建时间',
            prop: 'createTime',
            type: "date",
            format: "yyyy-MM-dd hh:mm:ss",
            width: 140,
            display: false
          },
        ]
      }
    }
  },
  methods: {
    ...mapActions('dag', ['getProcessListP' , 'editProcessState' , 'getStartCheck' , 'deleteDefinition']),
    ...mapActions('security', ['getWorkerGroupsAll']),
    _start (item) {
      this.getWorkerGroupsAll()
      this.getStartCheck({ processDefinitionId: item.id }).then(res => {
        this.startData = item
        this.startDialog = true
      }).catch(e => {
        this.$message.error(e.msg || '')
      })
    },
    _deleteDefinition(row){
      this.$confirm(`确定要删除${row.name}？` , `删除采集任务` , {
        type: 'warning',
        beforeClose: (action , instance , done) => {
          if(action === 'confirm'){
            instance.confirmButtonLoading = true;
            this.deleteDefinition({processDefinitionId: row.id}).then(
              () => {
                instance.confirmButtonLoading = false;
                this.$message({
                  type: 'success',
                  message: '操作成功'
                });
                this.onLoad();
                done();
              }
            ).catch(() => {
              instance.confirmButtonLoading = false;
              done();
            })
          }else{
            done();
          }
        }
      });
    },
    onUpdateStart () {
      this.onLoad()
      this.startDialog = false
    },
    closeStart () {
      this.startDialog = false
    },
    /**
     * timing
     */
    _timing (item) {
      this.timingData.item = item
      this.timingData.type = 'timing'
      this.timingDialog = true
    },
    timeManage(item) {
      this.$router.push({
        path: "/metadata/timerManage/" + item['id']
      });
    },
    onUpdateTiming () {
      this.onLoad()
      this.timingDialog = false
    },
    closeTiming () {
      this.timingDialog = false
    },
    /**
     * Offline
     */
    _downline (item) {
      this._upProcessState({
        processId: item.id,
        releaseState: 'OFFLINE'
      })
    },
    /**
     * online
     */
    _poponline (item) {
      this._upProcessState({
        processId: item.id,
        releaseState: 'ONLINE'
      })
    },
    /**
     * Edit state
     */
    _upProcessState (o) {
      this.editProcessState(o).then(res => {
        this.$message.success(res.msg)
        $('body').find('.tooltip.fade.top.in').remove()
        this.onLoad()
      }).catch(e => {
        this.$message.error(e.msg || '')
      })
    },
    createTask(){
      this.$router.push('/dataIntegration/collectionTask/create')
    },
    onLoad(){
      this.getProcessListP({
        pageSize: this.page.pageSize,
        pageNo: this.page.currentPage,
        type: 2,
        searchVal: this.searchVal,
        userId: ''
      }).then(
        res => {
          if(res){
            this.page.total = res['total'];
            this.tableData = res['totalList'];
          }
        }
      )
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    }
  }
}
</script>
